<template>
    <div class='fxn-body'>
        <div class="fxn-login">
            <div class="fxn-login-left">
                <div class="left-logo">
                    <img src="@/static/img/logo.svg" alt="">
                </div>
                <div class="left-bg"></div>
            </div>
            <!-- Left End -->
            <div class="fxn-login-right">
                <div class="title">
                    <div>杰誉律所管理端</div>
                    <div class="sub">高性能数据应用管理工具</div>
                </div>
                <div class="from">
                    <el-form ref="loginForm" :model="ruleForm" :rules="refruleForm" @keyup.enter="handleSubmit">
                        <el-form-item prop="user_name">
                            <el-input v-model="ruleForm.user_name" prefix-icon="User" size="large" placeholder="输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="ruleForm.password" type="password" prefix-icon="Lock" size="large" placeholder="输入密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button class="fxn-login-btn fxn-button-block" type="danger" size="large" :loading="btnLoading" @click="handleSubmit()">提交</el-button>
                </div>
            </div>
            <!-- Right End -->
        </div>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, onUnmounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                btnLoading: false,
                loginForm: '',
                ruleForm: {
                    user_name: '',
                    password: '',
                },
                refruleForm: {
                    user_name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
                },
            })

            //提交
            const handleSubmit = () => {
                state.loginForm.validate((valid) => {
                    if (valid) {
                        proxy.$http.post('/sys/Login/index',state.ruleForm)
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                proxy.$msg.success('登陆成功');
                                localStorage.setItem('token',data.token);
                                localStorage.setItem('member_info',JSON.stringify(data.member_info));
                                router.push('/Index');
                            }
                        })
                    }
                })
            }
            
            //Dom加载
            onMounted(()=>{
                //document.querySelector('body').setAttribute('style', 'background: #0C0F18;')
            })

            // 组件卸载完成后执行
            onUnmounted(()=> {
                //document.querySelector('body').removeAttribute('style','')
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleSubmit,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    .fxn-login{
        margin: 100px auto 0;
        width: 800px;
        background: #FFFFFF;
        overflow: hidden;
    }

    .fxn-login-left{
        float: left;
        width: 300px;
        height: 500px;
        color: #FFFFFF;
        background: #FF1654;
        position: relative;
    }

    .fxn-login-left .left-bg{
        width: 300px;
        height: 300px;
        background: url(@/static/img/login-left.png) no-repeat;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .fxn-login-left .left-logo{
        padding: 30px;
    }

    .fxn-login-left .left-logo img{
        height: 42px;
    }

    .fxn-login-right{
        float: left;
        width: 300px;
        padding: 50px 100px 0;
    }

    .fxn-login-right .title{
        font-size: 24px;
        overflow: hidden;
    }

    .fxn-login-right .title .sub{
        color: #999999;
        font-size: 14px;
    }

    .fxn-login-right .from{
        margin-top: 50px;
        overflow: hidden;
    }

    .fxn-login-btn{
        margin-top: 30px;
    }
</style>